<template>
  <div>
    <h1>{{this.id ? '编辑分类': '创建分类'}}</h1>
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-form-item label="分类">
        <el-select  @clear="handleClearClick"   @change="handleSelect1Change" clearable v-model="modelParent" placeholder="请选择">
          <el-option
            v-for="item in categories"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>
<script>
export default {
  name: 'CategoryCreate',
  props: {
    id: String
  },
  data () {
    return {
      model: {
        parents: []
      },
      modelParent: '',
      categories: [],
      currentCategoryId: '',
      subCategories: []
    }
  },
  methods: {
    async save () {
      let result
      if(this.id){
        result = await this.$http.put(`/rest/categories/${this.id}`,this.model)
      } else {
         result = await this.$http.post('/rest/categories',this.model)
        if(this.currentCategoryId){
          const res = await this.$http.get(`/rest/categories/${this.currentCategoryId}`)
          let category = res.data

          category.children = Array.from(new Set([...category.children,result.data._id]))
          await this.$http.put(`/rest/categories/${this.currentCategoryId}`,category)
        }
      }
      
      if(result.data){
        this.$router.push('/categories/list')
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      }
    },
    async fetch () {
      const res = await this.$http.get(`/rest/categories/${this.id}`)
      this.model = res.data
      this.modelParent = this.model.parents[0]
    },
    async fetchParents () {
      const res = await this.$http.get('/rest/categories',{
        params: {
          $where: "this.parents.length <= 0"
        }
      })
     
      this.categories = res.data
    },
    async fetchSubCategoies (parents) {
      const res = await this.$http.get('/rest/categories',{
        params: {
           parents
        }
      })
      this.subCategories = res.data
    },
    handleClearClick () {
      this.currentCategoryId = ''
      this.model.parents = []
    },
    handleSelect1Change (value) {
      let val = []
      val.push(value)
      this.currentCategoryId = value
      this.model.parents = val
      this.fetchSubCategoies(value)
    }
  },
  computed: {
  },
  watch: {
    // modelParent: function(newVal,oldVal){
    //   if(newVal != oldVal){
    //     this.model.parents = Array.from(new Set([...this.model.parents,newVal]))
    //     let index = this.model.parents.indexOf(oldVal)
    //     index >=0 && this.model.parents.splice(index,1)
    //   }
    // }
  },
  created() {
    this.id && this.fetch()
    this.fetchParents()
  },
}
</script>
